<template>
    <!-- 中间组件 -->
  
  
    
        <div id="div-video">
          <myvido />
          <p id="rommInfoP" style="margin: 5px;">【wsn】小房间</p>
      <el-button type="primary"     >同步视频</el-button>
        </div>
        <div class="chat-wrapper" id="chatWrapper">
         
            <chat  />
       
          <div class="send-msg" id="sendMsg">
            <el-input placeholder="发送消息" />
            <el-button >发送</el-button>
          </div>
        </div>
     
  
      <!-- 房间设置抽屉 -->
      <el-drawer direction="btt">
        <template #header>
          <h4>房间设置</h4>
        </template>
  
        <template #default>
          <div>
            <el-form>
              <el-form-item label="视频源:" prop="src">
                <el-input style="width: 300px;" />
              </el-form-item>
              <el-form-item label="视频类型:" prop="type">
                <el-select style="width: 100px;" placeholder="请选择视频源类型">
                  <el-option label="mp4" value="video/mp4" />
                  <el-option label="m3u8" value="m3u8" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">切换视频源</el-button>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </el-drawer>
  
  

  </template>
  
  <script lang="ts" setup>
  import myvido from './video.vue'
  import chat from './chat.vue'

  
  </script>
  
  <style scoped>

  
  
  #div-video {
   width: 900px;
   /* height: 800px; */
   /* background-color: aquamarine; */
  }

  .chat-wrapper {
    background-color: #882828;
   flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-color: #333;
    border-radius: 2px;
    height: 670px;
  }
  
  .send-msg {
    display: flex;
 
    align-items: center;
  }
  
  .send-msg el-input {
    margin-right: 10px;
  }
  
  .send-msg el-button {
    min-width: 60px;
  }
  
  /* } */
  </style>